
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/overlayscrollbars/styles/overlayscrollbars.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<!-- 轮播图模块 -->
<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="../img/11.jpg" class="d-block w-100" alt="图书管理图片1">
            <div class="carousel-caption d-none d-md-block">
                <h5>全面的图书分类与检索功能</h5>
                <p>轻松管理海量图书资源</p>
            </div>
        </div>
        <div class="item">
            <img src="../img/22.jpg" class="d-block w-100" alt="图书管理图片2">
            <div class="carousel-caption d-none d-md-block">
                <h5>欢迎来到我的图书管理系统</h5>
                <p>高效便捷的图书资源与借阅服务</p>
            </div>
        </div>
        <div class="item">
            <img src="../img/44.jpg" class="d-block w-100" alt="图书管理图片3">
            <div class="carousel-caption d-none d-md-block">
                <h5>智能化的读者管理与借阅系统</h5>
                <p>提供优质的读者服务体验</p>
            </div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>


<!-- 系统介绍区域 -->
<section class="system-intro">
    <div class="container">
        <h2>小雨滴吖的图书管理系统简介</h2>
        <p>本系统提供了全面的图书管理和读者管理功能，旨在优化图书馆运营流程，提升图书资源利用效率以及为读者提供便利的借阅服务。</p>
        <p><strong>图书管理模块</strong>包括图书信息录入、查询、修改、删除等基础操作，并且具备图书分类、库存统计以及借阅记录查看等功能。</p>
        <p><strong>读者管理模块</strong>涵盖了读者注册、信息维护、借书记录查询、到期提醒等一系列服务。</p>
        <a href="/book/bookList" class="btn btn-primary mt-3">进入图书管理</a>
        <a href="/borrow/borrowList" class="btn btn-secondary mt-3">进入读者管理</a>
    </div>
</section>
<!-- 引入Bootstrap JS -->
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>

</body>
</html>